<template>
    <view>
        <view class="goodsDetail">
            <view>
                <m-swiper :list="goods_info.imageList"></m-swiper>
            </view>
            <view class="goods_info">
                <view class="goods_info_1">
                    <view class="goods_name">{{goods_info.name}}</view>
                    <view class="progress">
                        <van-progress
                                :percentage=storage_percent
                                color="#ffffff"
                                :show-pivot=false
                        />
                    </view>
                </view>
                <view class="goods_info_2">
                    <view class="goods_point">积分&nbsp;{{goods_info.integral}}</view>
                    <view class="goods_storage">库存:&nbsp;{{goods_info.number}}</view>
                </view>
            </view>
            <view style="width: 100%;height: 10px;background-color:#F7F7F7;"></view>
            <view class="num_account">
                <view class="num_tips">选择数量</view>
                <view class="stepper_box"><van-stepper   :max="goods_info.number" :value="select_num" @change="onChange" /></view>
            </view>
            <view class="fenge">{{goods_info.company_name}}</view>
            <view  style="width: 100%;height: 30px;background-color:#F7F7F7;text-align: center !important">
                <view class="detail_text">
                    <van-divider
                            contentPosition="center"
                            customStyle="color: #F57D25; border-color:#F57D25; font-size: 24rpx;;"
                    >
                        商品详情
                    </van-divider>
                </view>

            </view>
            <view class="rich_text">
                <rich-text :nodes="content"></rich-text>
            </view>
        </view>
        <view class="button_group">
<!--                <view class="button_1" @tap="addCart"><van-button color="linear-gradient(to top, #FF8C00, #FFCA60)" type="info" size="small" >加入购物车</van-button></view>-->
                <view class="button_2" @tap="goNext()"><van-button  color="linear-gradient(to top, #FF8C00, #FFCA60)"type="info" size="small" >立即兑换</van-button></view>
        </view>
    </view>

</template>

<script>
    import MSwiper from '@/components/m-goodsSwiper.vue'
    export default{
        name:"goodsDetail",
        data(){
            return{
                goods_info:{},
                storage_percent:'20',
                select_num:1,
                goods_id:'',
                content:''

            }
        },
        onLoad(query){
            this.goods_id=query.id
        },
        mounted(){
            this.getIntegralGoodsDetail(this.goods_id)
        },
        methods:{
            onChange(event){
             this.select_num=event.detail
            },
            goNext(){
                this.$router.push({
                    route:this.$routesConfig.sureChange,
                    query:{goods_id:this.goods_id,
                        goods_name:this.goods_info.name,
                        num:this.select_num,
                        goods_point:(parseInt(this.goods_info.integral*this.select_num)),
                        image:this.goods_info.image
                    }
                })
            },
            async getIntegralGoodsDetail(id){ // 获取积分商品详情
                let resData= await this.$apis.getIntegralGoodsDetail({id:id})
                this.goods_info=resData.data.model
                this.content=resData.data.model.detail
                this.storage_percent=(1-(this.goods_info.already_exchange_num/this.goods_info.number))*100
            },
            async addCart(){ //商品加入购物车加入购物车
                console.log(this.select_num)
                uni.showLoading({});
                let resData= await this.$apis.addCart({id:this.goods_id,number:this.select_num,access_token:''})
                uni.hideLoading();
                uni.showToast({
                    title:"加入成功",
                    icon:"success",
                    duration:1000
                })

            },

        },
        components:{
            MSwiper
        }
    }
</script>
<style>
    .van-stepper{
        /*width: 320rpx;*/
        height: 40rpx;
        margin-left: 20rpx !important;

    }
    .van-stepper__minus{
        border-top-left-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
        border: solid 0.5px #F57D25 !important;
        width: 80rpx !important;
        height: 50rpx !important;
        background-color: #ffffff !important;
        color: #FF9502 !important;
        margin: 0 !important;
    }
    .van-stepper__plus{
        border-top-right-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
        border: solid 0.5px #F57D25 !important;
        width: 80rpx !important;
        height: 50rpx !important;
        background:linear-gradient(to top,#F4A42C,#F86422) !important;
        color: #ffffff !important;
        margin: 0 !important;
    }
    .van-stepper__input{
        margin: 0 !important;
        width: 100rpx !important;
        height: 50rpx !important;
        border-top: solid 0.5px #F57D25 !important;
        border-bottom: solid 0.5px #F57D25 !important;
        background-color: #ffffff !important;
        color: #333333 !important;
    }
    /*.van-divider{*/
    /*    padding-top: 20rpx !important;*/
    /*    padding-left: 200rpx !important;*/
    /*}*/
    .van-button{
        width: 200rpx !important;
        height: 80rpx !important;
        font-size: 30rpx !important;
        border-radius: 8px !important;
    }
</style>

<style lang="less" scoped>
    .goods_info{
        background-image:url("https://qiniu.scxhrd.com/static/img/goods_info.png");
        background-repeat: no-repeat;
        background-size:100% 100%;
        /*background-size: contain;*/
        /*height: 130rpx;*/
        padding-left: 15rpx;
        padding-right: 15rpx;
    }
    .progress{
        width: 140rpx;
    }
    .goods_info_1{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 28rpx;
        color: #ffffff;
    }
    .goods_info_2{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #ffffff;
    }
    .goods_storage{
        font-size: 24rpx;
        margin-right: 5rpx;
    }
    .goods_name{
        margin-top: 10rpx;
        width: 560rpx;
        height: 85rpx;
    }
    .progress{
        margin-top: 28rpx;
        margin-right: 5rpx;
    }
    .goods_point{
        font-size: 28rpx;
    }
    .num_account{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 20rpx 20rpx;
        font-size: 26rpx;
    }
    .num_tips{
        margin-top: 8rpx;
    }
    .stepper_box{
    }
    .detail_text{
        width: 300rpx;
        margin-left: 240rpx;
    }
    .rich_text{
        text-align: center;
    }
    .button_group{
        position: fixed;
        bottom: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        background-color: #ffffff;
        width: 100%;
        height: 100rpx;
        padding-top: 20rpx;
        text-align: center;
    }
    .button_1{
        margin-left: 60rpx;
        margin-bottom: 40rpx;
    }
    .button_2{
        /*margin-left: 240rpx;*/
        margin-bottom: 40rpx;
    }
    .fenge{
        margin-left: 20rpx;
        font-size: 26rpx;
    }
</style>
